<template>
  <HeadSix :active-index="activeIndex"></HeadSix>
  <el-row>
    <bread-crumb>
      <template #one>区块链存证系统</template>
      <template #two>产品存证系统</template>
    </bread-crumb>
  </el-row>
  <el-card shadow="always" style="margin: 20px;">
    <el-row :gutter="20" class="header">
      <search-bar
          :add-text = searchBarText.addText
          :search-text= searchBarText.searchText
          :placeholder-context= searchBarText.placeholderContext
          @init-ProEvi-info="init"
          @handleDialogProEviValue="handleDialogProEviValue"
      >
      </search-bar>
      <one-table
          :table-data="tableData"
          :options-info="proEviInfo"
          @handleDialogProEviValue="handleDialogProEviValue"
          @up-link="upLink"
          @link-info="linkInfo"
      ></one-table>
      <paging :queryForm="queryForm"
              @my-size-change="handleSizeChange"
              @my-current-change="handleCurrentChange">
      </paging>
    </el-row>
  </el-card>
  <dialog-pro-evi
      v-model="dialogVisible"
      v-if="dialogVisible"
      :dialog-pro-evi-table-value="dialogProEviTableValue"
      :dialog-pro-evi-title="dialogProEviTitle"
      :queryForm="queryForm"
      @handleConfirm="handleConfirm"
  >
  </dialog-pro-evi>
  <drawer-info
      v-model="drawerVisible"
      :upLinkInfo="proUpLinkInfo"
      :option-info="upLinkInfo"
      :title="'产品上链信息'"
  >
  </drawer-info>
</template>

<script setup>
import HeadSix from "@/components/header/headSix.vue";
import BreadCrumb from "@/components/commons/breadCrumb.vue";
import Paging from "@/components/pagination/paging.vue";
import SearchBar from "@/components/commons/searchBar.vue";
import OneTable from "@/components/table/oneTable.vue";
import {onMounted, ref} from "vue";
import {confirmLink, initFormInfo, initTableInfo} from "@/api/methods/initInfo.js";
import {isNull} from "@/api/filters.js";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {addTableInfo} from "@/api/methods/addInfo.js";
import {updateFormInfo} from "@/api/methods/updateInfo.js";
import {delTableInfo} from "@/api/methods/delInfo.js";
import {
  applyProCerInfo, confirmProCerInfo,
  delProEviInfo, getProCerInfo,
  modifyProCerInfo,
  upProEviInfo
} from "@/api/apiPath/sixPart.js";
import {proEviInfo} from "@/api/options/sixPart/proEviInfo.js";
import DialogProEvi from "@/components/dialog/six/dialogProEvi.vue";
import DrawerInfo from "@/components/dialog/six/drawerInfo.vue";
import {upLinkInfo} from "@/api/options/sixPart/upLinkInfo.js";

const activeIndex = '/proDuctCunzheng'
const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 5,
  totalSize: 0
})
const tableData = ref([])
const dialogVisible = ref(false)
const drawerVisible = ref(false)
const dialogProEviTitle = ref('')
const dialogProEviTableValue = ref({})
const searchBarText = ref({
  addText : "添加上链信息",
  searchText : "搜索上链信息",
  placeholderContext: "请输入产品名称"
})
const proUpLinkInfo = ref()
const init = (query)=> {
  queryForm.value.query = query
  initTableInfo(upProEviInfo(queryForm.value), tableData, queryForm)
}

onMounted(()=> {
  init()
})

const handleSizeChange = (pageSize)=> {
  queryForm.value.pageSize = pageSize
  queryForm.value.pageNum = 1
  init()
}
const handleCurrentChange = (pageNum)=> {
  queryForm.value.pageNum = pageNum
  init()
}

const handleDialogProEviValue = (row)=> {
  if (isNull(row)) {
    dialogProEviTitle.value = "添加上链信息"
    dialogProEviTableValue.value = {}
  } else {
    dialogProEviTitle.value = "编辑上链信息"
    dialogProEviTableValue.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}
const handleConfirm = async (formValue, formRef)=> {
  formValue = ref(formValue)
  formRef.validate( async valid => {
    if (!valid) {
      ElMessage({
        message: "请填写完整！",
        type: 'warning',
        duration: 1500
      })
    } else {
      try {
        dialogProEviTitle.value === '添加上链信息'
            ? addTableInfo(applyProCerInfo(), formValue, upProEviInfo(queryForm.value), tableData, queryForm)
            : updateFormInfo(modifyProCerInfo(), formValue, upProEviInfo(queryForm.value), tableData, queryForm)
        dialogVisible.value = false
      }catch (err) {
        console.log("errorOne" + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    }
  })
}
const upLink = (row)=> {
  ElMessageBox.confirm(
      '此操作将上链该信息且上链后无法篡改，是否继续？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          confirmLink(confirmProCerInfo(row.proIndex), upProEviInfo(queryForm.value), tableData, queryForm)
        } catch (e) {
          console.log(e)
          ElNotification({
            message: "请求失败",
            type: 'error',
            duration: 1500
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消上链',
        })
      })
}
const linkInfo = (row) => {
  console.log(row)
  const {certificate} = row

  initFormInfo(getProCerInfo(row.proIndex), proUpLinkInfo)
  proUpLinkInfo.value = {...proUpLinkInfo.value, certificate}
  console.log(proUpLinkInfo.value)
  drawerVisible.value = true
}
</script>

<style scoped>

</style>